@charset "utf-8";
/*
 *懒人CSS Bate V0.10
 *作者：懒人建站 http://www.51xuediannao.com/
 *2015-02-04———
*/

/*---------进度条（非必需）---------*/
.bl-progress {height: 14px;overflow: hidden;	background-color: #ddd; border-radius: 8px; vertical-align: middle;
  		-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.bl-progress-bar {float: left; width: 0;height:100%;
	line-height: 14px;font-size: 12px; color: #fff;text-align: center;
  	/*background-color: #EA7351;*/ background-color: #ff7800;
  	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  	-webkit-transition: width 0.6s ease;
          transition: width 0.6s ease;
}
.progress-bar-success{	background-color: #71b247;}
.progress-bar-warning{	background-color: #f0ad4e;}
.progress-bar-danger{	background-color: #d9534f;}
.progress-bar-info{		background-color: #5bc0de;}
.bl-progress-num{ vertical-align: middle}
.bl-progress-bar .bl-progress-num{ vertical-align:baseline}

/*产生斜线纹理*/
.bl-progress-striped .bl-progress-bar {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

/*canvas圆形进度*/
.ring-canvas{ cursor: pointer;}

/*
* 圆形进度 IE9+
<div class="bl-ring ring-L" data-progress="82">
    <div class="ring-hold ring-hold1">
        <div class="ring-pie ring-pie1"></div>
    </div>
    <div class="ring-hold ring-hold2">
        <div class="ring-pie ring-pie2"></div>
    </div>
    <div class="ring-bg"></div>
    <div class="ring-time">80%</div>
</div>
*/
.bl-ring{ width:100px; height:100px; position: relative; cursor: pointer;
    vertical-align: middle; display: none;}
:root .bl-ring{display: inline-block; }
:root .icon-btn-ring{ display: none;}

.bl-ring .ring-bg{width:100%; height:100%; background-color:#51a351; border-radius:100%; position:absolute; top:0; left: 0;}
.bl-ring .ring-pie {
    width:100%; height:100%; border-radius:100%;
    background-color:#ddd;
    position:absolute;
}
.bl-ring .ring-pie1 { clip:rect(0px,100px,100px,50px);}
.bl-ring .ring-pie2 { clip:rect(0px,50px,100px,0px); }

.bl-ring .ring-hold {  width:100%; height:100%;position:absolute;z-index:1;}
.bl-ring .ring-hold1 { clip:rect(0px,100px,100px,50px); }
.bl-ring .ring-hold2 { clip:rect(0px,50px,100px,0px); }

.bl-ring .ring-time { width:80%; height:80%; margin:10% 0 0 10%; background-color:#fff; border-radius:100%; position:absolute; z-index:1;
    text-align: center;font-size: 14px; font-family: arial, helvetica, sans-serif;
}

.bl-ring .ring-pie1{
    -o-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0);
}
.bl-ring .ring-pie2{
    -o-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
}

.ring-S{width:20px; height:20px; }
.ring-S .ring-pie1,.ring-S .ring-hold1 { clip:rect(0px,20px,20px,10px);}
.ring-S .ring-pie2,.ring-S .ring-hold2 { clip:rect(0px,10px,20px,0px); }
.ring-S .ring-time{ line-height: 14px; font-size: 12px;}

.ring-M{width:40px; height:40px; }
.ring-M .ring-pie1,.ring-M .ring-hold1 { clip:rect(0px,40px,40px,20px);}
.ring-M .ring-pie2,.ring-M .ring-hold2 { clip:rect(0px,20px,40px,0px); }
.ring-M .ring-time{ line-height: 30px;font-size: 12px;}

.ring-L{width:60px; height:60px; }
.ring-L .ring-pie1,.ring-L .ring-hold1 { clip:rect(0px,60px,60px,30px);}
.ring-L .ring-pie2,.ring-L .ring-hold2 { clip:rect(0px,30px,60px,0px); }
.ring-L .ring-time{ line-height: 50px;}

.ring-XL{width:80px; height:80px; }
.ring-XL .ring-pie1,.ring-XL .ring-hold1 { clip:rect(0px,80px,80px,40px);}
.ring-XL .ring-pie2,.ring-XL .ring-hold2 { clip:rect(0px,40px,80px,0px); }
.ring-XL .ring-time{ line-height: 60px;}